<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="link1">按钮</button>

<div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
</div>
<div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
</div>
</body>
<script>
    //通用的绑定函数
    function bindEvent(elem, type, fn) {
      elem.addEventListener(type, fn)
    }

    const a = document.getElementById('link1')
    bindEvent(a, 'click', e => {
      e.preventDefault()     //阻止默认行为
      alert('clicked')
    })

    const p1 = document.getElementById('p1')
    const body = document.body
    bindEvent(p1, 'click', e => {
      e.stopPropagation()   //阻止事件冒泡
      alert('激活')
    })
    bindEvent(body, 'click', e => {
      alert('取消')
    })

    // addEventListener("eventType","handler","true|false")  //true就为事件捕获，默认false
</script>
</html>
